<!DOCTYPE html>
<html>
<head>
  	<meta charset="utf-8">
  	<title>Finder - Jwp</title>
  	<meta name="renderer" content="webkit">
  	<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
  	<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=0">
  	<link rel="stylesheet" href="/assets/layui/css/layui.css" media="all">
  	<link rel="stylesheet" href="/assets/admin/css/admin.css" media="all">
</head>
<body>
	<div class="layui-tab" style="margin:0;width:100%;">
	  	<ul class="layui-tab-title" style="background-color: #f8f8f8;padding-left:5px;">
	    	<li>从计算机</li>
	    	<li>从URL</li>
	    	<li class="layui-this">媒体库</li>
	  	</ul>
	  	<div class="layui-tab-content">
	    	<div class="layui-tab-item">
	    		<input type="hidden" id="post_author" value="#(loginUser.ID)"/>
				<div class="layui-upload-drag" id="upload" style="width:100%;padding:70px 0;">
				  	<i class="layui-icon">&#xe67c;</i>
				  	<p>点击上传，或将文件拖拽到此处</p>
				</div>
				<p class="max-upload-size" style="font-size: 13px;line-height: 1.5;margin: 1em 0;">最大上传文件大小：32 MB。</p>
				<div id="media-items" style="display:none;">
					
				</div>
	    	</div>
	    	<div class="layui-tab-item">
	    		<h3 class="media-title">插入其它站点上的媒体</h3>
	    		<div class="layui-tab layui-tab-brief" lay-filter="docDemoTabBrief">
				  	<ul class="layui-tab-title">
				    	<li class="layui-this">图像</li>
				    	<li>音频、视频等文件</li>
				  	</ul>
				  	<div class="layui-tab-content">
				  		<div class="layui-tab-item layui-show">
				  			<form class="layui-form" action="">
				  				<div class="layui-form-item">
									<label class="layui-form-label">URL</label>
								    <div class="layui-input-block">
								      	<input type="text" name="title" required  lay-verify="required" placeholder="" autocomplete="off" class="layui-input">
								    </div>
							  	</div>
							  	<div class="layui-form-item">
									<label class="layui-form-label">标题</label>
								    <div class="layui-input-block">
								      	<input type="text" name="title" required  lay-verify="required" placeholder="" autocomplete="off" class="layui-input">
								    </div>
							  	</div>
							  	<div class="layui-form-item">
									<label class="layui-form-label">替代文本</label>
								    <div class="layui-input-block">
								      	<input type="text" name="title" placeholder="" autocomplete="off" class="layui-input">
								    </div>
							  	</div>
							  	<div class="layui-form-item layui-form-text">
									<label class="layui-form-label">图像说明</label>
								    <div class="layui-input-block">
								      	<textarea name="desc" placeholder="请输入内容" class="layui-textarea"></textarea>
								    </div>
							  	</div>
							  	<div class="layui-form-item">
									<label class="layui-form-label">对齐方式</label>
								    <div class="layui-input-block">
								      	<input type="radio" name="sex" value="男" title="无">
      									<input type="radio" name="sex" value="女" title="左">
      									<input type="radio" name="sex" value="女" title="中">
      									<input type="radio" name="sex" value="女" title="右">
								    </div>
							  	</div>
							  	<div class="layui-form-item">
									<label class="layui-form-label">将图像链接到</label>
								    <div class="layui-input-block">
								      	<input type="text" name="title" placeholder="" autocomplete="off" class="layui-input">
								    </div>
							  	</div>
							  	<div class="layui-form-item">
								    <div class="layui-input-block">
								      	<button class="layui-btn" lay-submit lay-filter="formDemo">插入到文章</button>
								    </div>
							  	</div>
				  			</form>
				  		</div>
				  		<div class="layui-tab-item">
				  			<form class="layui-form" action="">
				  				<div class="layui-form-item">
									<label class="layui-form-label">URL</label>
								    <div class="layui-input-block">
								      	<input type="text" name="title" required  lay-verify="required" placeholder="" autocomplete="off" class="layui-input">
								    </div>
							  	</div>
							  	<div class="layui-form-item">
									<label class="layui-form-label">标题</label>
								    <div class="layui-input-block">
								      	<input type="text" name="title" required  lay-verify="required" placeholder="" autocomplete="off" class="layui-input">
								    </div>
							  	</div>
							  	<div class="layui-form-item">
								    <div class="layui-input-block">
								      	<button class="layui-btn" lay-submit lay-filter="formDemo">插入到文章</button>
								    </div>
							  	</div>
				  			</form>
				  		</div>
				  	</div>
				</div> 
	    	</div>
	    	<div class="layui-tab-item layui-show">
	    		<form id="posts-filter" class="layui-form">
					<div class="wp-filter">
						<div class="filter-items">
							<input type="hidden" name="mode" value="list">
							<div class="view-switch">
								<a href="?mode=list" class="view-list current" id="view-switch-list"><span class="screen-reader-text">列表视图</span></a>
								<a href="?mode=grid" class="view-grid" id="view-switch-grid"><span class="screen-reader-text">网格视图</span></a>
							</div>
					
							<label for="attachment-filter" class="screen-reader-text">按类型筛选</label>
							<div class="layui-inline">
								<select class="attachment-filters" name="attachment-filter" id="attachment-filter">
									<option value="">所有多媒体项目</option>
									<option value="post_mime_type:image">图像</option>
									<option value="detached">尚未附加</option>
									<option value="mine">我的</option>
								</select>
							</div>
					
							<div class="actions">
								<label for="filter-by-date" class="screen-reader-text">按日期筛选</label>
								<div class="layui-inline">
									<select name="m" id="filter-by-date">
										<option selected="selected" value="0">全部日期</option>
										<option value="201903">2019年三月</option>
									</select>
								</div>
								<div class="layui-inline">
									<input type="submit" name="filter_action" id="post-query-submit" class="layui-btn layui-btn-sm layui-btn-primary" value="筛选">
								</div>		
							</div>
						</div>
						
						<div class="search-form">
							<label for="media-search-input" class="screen-reader-text">搜索媒体</label>
							<div class="layui-inline">
								<input type="search" placeholder="搜索媒体项目…" id="media-search-input" class="layui-input" name="s" value="">
							</div>
						</div>
					</div>
					
					<div class="tablenav top">
						<div class="tablenav-pages"></div>
						<br class="layui-clear">
					</div>
					
			    	<table class="layui-table" lay-skin="line" lay-even>
					  	<colgroup>
					    	<col>
					    	<col width="120">
					  	</colgroup>
					  	<thead>
					    	<tr align="left">
					      		<th>文件</th>
					      		<th>作者</th>
					    	</tr> 
					  	</thead>
					  	<tbody>
					    	
					  	</tbody>
					  	#[[
					  		<script id="attachment-page-tpl" type="text/xml">
							{{# layui.each(d, function(index, item){ }}
							<tr align="left">
					      		<td>
					      			<strong class="has-media-icon">
										<a href="" aria-label="“ad”（编辑）">				
											<span class="media-icon image-icon">
												<img width="60" height="60" src="{{item.guid}}" class="attachment-60x60 size-60x60" alt="">
											</span>
											{{item.post_title}}
										</a>		
									</strong>
									<p class="filename">
										<span class="screen-reader-text">文件名： </span>
										{{item.filename}}
									</p>
					      		</td>
					      		<td>
					      			<a href="">{{item.author.display_name}}</a>
					      		</td>
					    	</tr>				
							{{# }); }}
							</script>
					  	]]#
					</table>
				</form>
	    	</div>
	  	</div>
	</div>
	<script src="/assets/layui/layui.js"></script>
	<script>
	layui.cache.user = {
		username: '游客' 
		,uid: -1 
		,avatar: '' 
		,experience: 0 
		,sum: 0 
		,vip: 0 
		,sex: ''
	};
	layui.cache.base = '/assets/tbynet/admin/'; //静态资源所在路径
	layui.config({
		version: true
  	}).extend({
  		'tbynet': '{/}/assets/tbynet/tbynet'
  	});
	
	layui.use(['upload', 'element', 'laypage', 'form', 'tbynet'], function(){
		var $ = layui.$
		,upload = layui.upload
		,element = layui.element
		,laytpl = layui.laytpl
		,laypage = layui.laypage
		,form = layui.form
		,tbynet = layui.tbynet;
		
		//拖拽上传
		upload.render({
		    elem: '#upload'
		    ,url: '/admin/attachment/save'
		    ,auto: false
		    ,multiple: true
		    ,data: {
	    	  	post_author: function(){
	    		    return $('#post_author').val();
				}
	   		}
		    ,choose: function(obj){
		        //将每次选择的文件追加到文件队列
		        var files = obj.pushFile();
		        
		        //预读本地文件，如果是多文件，则会遍历。(不支持ie8/9)
		        obj.preview(function(index, file, result){
		          	console.log(index); //得到文件索引
		          	console.log(file); //得到文件对象
		          	console.log(result); //得到文件base64编码，比如图片
		          	
		          	$('#media-items').append('<div class="media-item" id="media-item-'+ index +'">\
						<img class="pinkynail" src="'+ result +'" alt="">\
						<a class="edit-attachment" href="" target="_blank">编辑</a>\
						<div class="layui-progress layui-progress-big progress" lay-showPercent="true" lay-filter="demo">\
							<div class="layui-progress-bar layui-bg-blue" lay-percent="80%">80%</div>\
						</div>\
						<div class="filename new"><span class="title">IMG_0612</span></div>\
					</div>');
		          	
		          	element.progress('demo', '80%');
		          	
		          	obj.upload(index, file);
		          	
		          	//obj.resetFile(index, file, '123.jpg'); //重命名文件名，layui 2.3.0 开始新增
		          
		          	//这里还可以做一些 append 文件列表 DOM 的操作
		          
		          	//obj.upload(index, file); //对上传失败的单个文件重新上传，一般在某个事件中使用
		          	//delete files[index]; //删除列表中对应的文件，一般在某个事件中使用
		        });
		        
		        $('#media-items').show();
		    }
			,before: function(obj){ //obj参数包含的信息，跟 choose回调完全一致，可参见上文。
			    
			}
		    ,done: function(res, index, upload){
		      	console.log(res)
		    }
		});
		
		function search(curr, q){
	    	if($('#attachment-page-tpl').length == 0) {
	    		return;
	    	}
	    	
			tbynet.ajax('/admin/attachment/search', {page: curr || 1, q: q || $('#post-search-input').val()}, function(res){
				
				if(res.data.totalRow == 0) {
					$('table tbody').html('<tr><td colspan="2">找不到媒体。</td></tr>');
					$('.tablenav').hide();
				} else {
					laytpl($('#attachment-page-tpl').html()).render(res.data.list, function(html){
						$('table tbody').html(html);
					});
				}
				
				laypage.render({elem: $('.tablenav-pages'), count: res.data.totalRow, limit: res.data.pageSize, curr: curr || 1, layout: ['count', 'prev', 'page', 'next'], jump: function(obj, first){
					if(!first){
				        search(obj.curr, q);
					}
				}});
				
				form.render();
			}, "json");
		};
		
		search();
		
	});
	</script>
</body>
</html>
